<template>
    <div class="content-container">
        <el-form :model="roleForm" ref="roleForm" :rules="roleRules" label-width="100px">
            <el-form-item label="角色名称" prop="name">
                <el-input v-model="roleForm.name" placeholder="请输入角色名称"></el-input>
            </el-form-item>
            <el-form-item label="角色编号" prop="id">
                <el-input v-model="roleForm.id"></el-input>
            </el-form-item>
            <el-form-item label="分配权限" prop="permission">
                <el-transfer :data="permissions" v-model="roleForm.permission"
                             :titles="['权限列表', '已选择权限']"></el-transfer>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="saveRole()">保存</el-button>
                <el-button type="danger" @click="reset()">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    import {getPermissionsApi, addRolesApi, getRoleApi, updateRoleApi} from '@/request/api'

    export default {
        name: "AddRole",
        data() {
            return {
                roleForm: {
                    name: '',
                    id: '',
                    permission: []
                },
                permissions: [],
                roleRules: {
                    name: {required: true, message: '角色名称不能为空', trigger: 'blur'},
                    id: {required: true, message: '角色编号不能为空', trigger: 'blur'}
                },
                roleID: null,
            }
        },
        watch: {
            roleID(newVal, oldVal) {
                if (newVal) {
                    getRoleApi({
                        id: newVal
                    }).then(res => {
                        if (res.success === true) {
                            this.roleForm.id = res.data.sn
                            this.roleForm.name = res.data.name
                            this.roleForm.permission = res.data.permissions.map((per, index) => per.id) || []
                        }
                    })
                }
            }
        },
        methods: {
            reset() {
                this.$refs['roleForm'].resetFields()
            },
            // 保存角色
            saveRole() {
                this.$refs['roleForm'].validate(valid => {
                    if (valid) {
                        if (this.roleID) {
                            updateRoleApi({
                                name: this.roleForm.name,
                                sn: this.roleForm.id,
                                ids: this.roleForm.permission,
                                id: this.roleID
                            }).then(res => {
                                if (res.success === true) {
                                    this.$message.success('角色信息修改成功')
                                    this.$router.go(-1)
                                }
                            })
                        } else {
                            addRolesApi({
                                name: this.roleForm.name,
                                sn: this.roleForm.id,
                                ids: this.roleForm.permission
                            }).then(res => {
                                if (res.success === true) {
                                    this.$message.success('角色信息添加成功')
                                    this.$router.go(-1)
                                }
                            })
                        }

                    } else {
                        return false
                    }
                })
            }
        },
        created() {
            this.roleID = this.$route.params.roleid || null

            getPermissionsApi({
                currentPage: 1,
                pageSize: 1000
            }).then(res => {
                if (res.success === true) {
                    this.permissions = res.data.list.map((per, index) => {
                        return {
                            key: per.id,
                            label: per.name
                        }
                    })
                }
            })

        }
    }
</script>

<style type="text/less" lang="less" scoped>
    .el-form {
        width: 700px;
    }
</style>